<template>
  <div :class="[type,{disabled}]" :style="$attrs.style"><span v-if="hdTip">{{hdTip}}</span>{{content}}</div>
  <span></span>
  <!-- {{arr}} -->
</template>

<script>
  export default {
    // props:['content']
    props:{
      content:{
        type: String,
        default: "确定",
        required: true  //content这个属性必须要设置
      },
      type:{
        type:String,
        default: "info",
        validator(v){ //验证
          return ['info','success','danger'].includes(v);
        }
      },
      disabled:{
        type:Boolean,
        default: false
      },
      hdTip:{
        type:String,
      }
      // arr:{
      //   type: Number,
      //   default(){  //如果是引用类型，返回函数
      //     return [1,2,3,4]
      //   }
      // }
    }
  }
</script>

<style lang="scss" scoped>
div{
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  transition: 1s;
  opacity: 0.6;
  &:hover{
    opacity: 1;
  }
  &.info{
    background-color:grey;
  }
  &.success{
    background-color:#27ae60;
  }
  &.danger{
    background-color:red;
  }
  &.disabled{
    background-color:#aaa;
    color:#666;
    cursor: default;
  }
}
</style>
